<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referrer" content="origin" />
    <meta name="viewport" content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <title>商家小票</title>
    <link rel="icon" href="../img/icon.png" />
    <script src="https://img.ins-box.com/static/js/vue_3.js"></script>
    <style>
      body {
        font-family: PingFang SC, 'Helvetica Neue', Arial, sans-serif;
      }
      .ticket {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-family: PingfangSC;
      }
      .ticket-item__unit {
        font-size: 23px;
        line-height: 1.4;
        font-family: Wechat sans SS;
      }
      .ticket-item__fee {
        margin-top: -10px;
        display: flex;
        align-items: center;
        line-height: 1.4;
        font-size: 27px;
        color: #c82727;
        font-weight: 500;
        font-family: Wechat sans SS;
        margin-bottom: 20px;
        font-weight: 600;
      }
      .ticket-img {
        height: 120px;
        margin: 15px 0;
      }
      .ticket-title {
        font-size: 15px;
        line-height: 1.4;
        color: #666;
        margin: 20px 0 10px 0;
        font-weight: 600;
      }
      .ticket-btn {
        color: #3cb271;
        font-size: 24px;
        border-radius: 6px;
        border: 2px #3cb271;
        padding: 5px 50px;
        background: #f3f3f3;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="ticket">
        <img src="https://dev-img.ins-box.com/image/wxapp/paySuccess.png" class="ticket-img" />
        <!-- <span class="ticket-title">{{interfaceName}}</span> -->
        <div class="ticket-item__fee">
          <span class="ticket-item__unit">¥</span>
          {{premium}}
        </div>
        <button class="ticket-btn" @click="confirm">订单详情</button>
      </div>
    </div>
    <script>
      const { reactive, computed, watch, onMounted, onUnmounted, ref } = Vue
      const app = Vue.createApp({
        setup() {
          const interfaceName = ref()
          const premium = ref()
          const businessNo = ref()
          const orderDetailsUrl = ref()

          function getUrlKey(name) {
            return (
              decodeURIComponent(
                (new RegExp(`[?|&]${name}=([^&;]+?)(&|#|;|$)`).exec(decodeURIComponent(location.href)) || [undefined, ''])[1].replace(/\+/g, '%20')
              ) || null
            )
          }

          function confirm() {
            let detailData = {
              action: 'jumpOut',
              jumpOutUrl: `${location.origin}/#${orderDetailsUrl.value}?businessNo=${businessNo.value}&modifyAble=false&type=local`
            }
            let jumpDetail = JSON.stringify(detailData)
            parent.postMessage(jumpDetail, 'https://payapp.weixin.qq.com')
          }

          onMounted(() => {
            const mchData = { action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE' }
            const postData = JSON.stringify(mchData)
            parent.postMessage(postData, 'https://payapp.weixin.qq.com')
            // 计算服务商页面高度
            const customPageHeight = document.body.scrollHeight
            const height = customPageHeight * (640 / Math.round(document.documentElement.getBoundingClientRect().width))
            const heightData = { action: 'onIframeReady', displayStyle: 'SHOW_CUSTOM_PAGE', height }
            const HeightPost = JSON.stringify(heightData)
            parent.postMessage(HeightPost, 'https://payapp.weixin.qq.com')
            interfaceName.value = getUrlKey('interfaceName')
            premium.value = getUrlKey('premium')
            businessNo.value = getUrlKey('businessNo')
            orderDetailsUrl.value = getUrlKey('orderDetailsUrl')
          })

          return {
            interfaceName,
            premium,
            businessNo,
            orderDetailsUrl,
            confirm
          }
        }
      })

      app.mount('#app')
    </script>
  </body>
</html>
